import { Form, Modal, Tooltip, Icon, Input, message } from "antd";
import React from "react";
import styles from "./index.less";
import { doApplicationEdit, postSaveImChannelInfo } from '@/services/robotManagement';
import jsonDataUtils from "@/utils/jsonDataUtils";

class ChannelInfoEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      infoData: {}
    }
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  openModal = (infoData) => {
    this.setState({ visible: true, infoData }, () => {
      const { channel, form } = this.props;
      if (infoData.platformParams && jsonDataUtils.isJsonString(infoData.platformParams)) {
        let platformParams = JSON.parse(infoData.platformParams);
        if (channel == 'QWX_CORP_BUILD' || channel == 'QWX_NATIVE') {
          setTimeout(() => {
            form.setFieldsValue({
              corpId: platformParams.corpId,
              agentId: platformParams.agentId,
              agentSecret: platformParams.agentSecret
            })
          }, 300)
        }
        if (channel == 'DD_CORP_BUILD' || channel == 'DD_NATIVE') {
          setTimeout(() => {
            form.setFieldsValue({
              corpId: platformParams.corpId,
              apiToken: platformParams.apiToken,
              agentId: platformParams.agentId,
              appKey: platformParams.appKey,
              appSecret: platformParams.appSecret
            })
          }, 300)
        }
        if (channel == 'FS_CORP_BUILD' || channel == 'FS_NATIVE') {
          setTimeout(() => {
            form.setFieldsValue({
              appId: platformParams.appId,
              appSecret: platformParams.appSecret,
              encryptKey: platformParams.encryptKey,
              verificationToken: platformParams.verificationToken,
            })
          }, 300)
        }
      }
    })
  }

  cancelInfoModal = () => {
    this.props.form.resetFields()
    this.setState({ visible: false, infoData: {} })
  }

  validateForm = () => {
    const { infoData } = this.state;
    const that = this;
    that.props.form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        console.log(values);
        let platformParams = infoData.platformParams && jsonDataUtils.isJsonString(infoData.platformParams) ? JSON.parse(infoData.platformParams) : {}
        platformParams = JSON.stringify({ ...platformParams, ...values })
        infoData.applicationName = infoData.name;
        let obj = { ...infoData, platformParams }
        let res = await doApplicationEdit(obj)
        if (res.code === 0) {
          message.info(res.msg)
          that.props.refreshByOk()
          that.cancelInfoModal()
        }
      }
    });
  }

  render() {
    const { visible } = this.state;
    const { getFieldDecorator } = this.props.form;
    const { channel } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };

    return (
      <Modal title="渠道信息编辑" visible={visible} onCancel={this.cancelInfoModal} onOk={this.validateForm} width={600}>
        <Form {...formItemLayout}>
          {
            channel == 'QWX_CORP_BUILD' || channel == 'QWX_NATIVE' ? (
              <div className={styles.channelSet}>
                <div className={styles.infoTitle}>请填写以下企业微信信息</div>
                <Form.Item
                  label={
                    <span>
                      企业id&nbsp;
                      <Tooltip title='登录企业微信管理后台，在"我的企业>企业信息"中找到企业ID'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }
                >
                  {getFieldDecorator("corpId", {
                    rules: [{ required: true, message: "请输入企业id", whitespace: true }],
                  })(<Input placeholder='请输入企业id' disabled style={{ width: "80%" }} />)}
                </Form.Item>
                <Form.Item
                  label={
                    <span>
                      应用AgentId&nbsp;
                      <Tooltip title='企业微信管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId和Secret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }
                >
                  {getFieldDecorator("agentId", {
                    rules: [{ required: true, message: "请输入应用AgentId", whitespace: true }],
                  })(<Input placeholder='请输入应用AgentId' disabled style={{ width: "80%" }} />)}
                </Form.Item>
                <Form.Item
                  label={
                    <span>
                      应用Secret&nbsp;
                      <Tooltip title='企业微信管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId和Secret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }
                >
                  {getFieldDecorator("agentSecret", {
                    rules: [{ required: true, message: "请输入应用Secret", whitespace: true }],
                  })(<Input.TextArea autoSize placeholder='请输入应用Secret' style={{ width: "80%" }} />)}
                </Form.Item>
              </div>
            ) : ''
          }
          {
            channel == 'DD_CORP_BUILD' || channel == 'DD_NATIVE' ? (
              <div className={styles.channelSet}>
                <div className={styles.infoTitle}>请填写以下钉钉信息</div>
                <Form.Item
                  label={
                    <span>
                      corpId&nbsp;
                      <Tooltip title='登录钉钉管理后台，在"我的企业>企业信息"中找到企业ID'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }
                >
                  {getFieldDecorator("corpId")(<Input placeholder={"请输入corpId"} style={{ width: "80%" }} />)}
                </Form.Item>
                <Form.Item
                  label={
                    <span>
                      API Token&nbsp;
                      <Tooltip title='登录钉钉管理后台，在"我的企业>企业信息"中找到API Token'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }
                >
                  {getFieldDecorator("apiToken")(<Input placeholder={"请输入API Token"} style={{ width: "80%" }} />)}
                </Form.Item>
                <Form.Item
                  label={
                    <span>
                      AgentId&nbsp;
                      <Tooltip title='钉钉管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId、AppKey和AppSecret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }
                >
                  {getFieldDecorator("agentId")(<Input placeholder={"请输入AgentId"} style={{ width: "80%" }} />)}
                </Form.Item>
                <Form.Item
                  label={
                    <span>
                      APPKey&nbsp;
                      <Tooltip title='钉钉管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId、AppKey和AppSecret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }
                >
                  {getFieldDecorator("appKey")(<Input placeholder={"请输入APPKey"} style={{ width: "80%" }} />)}
                </Form.Item>
                <Form.Item
                  label={
                    <span>
                      AppSecret&nbsp;
                      <Tooltip title='钉钉管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId、AppKey和AppSecret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }
                >
                  {getFieldDecorator("appSecret")(<Input placeholder={"请输入AppSecret"} style={{ width: "80%" }} />)}
                </Form.Item>
              </div>
            ) : ''
          }
          {
            channel && (channel == 'FS_CORP_BUILD' || channel == 'FS_NATIVE') ? (
              <div>
                <Form.Item label={<span>AppId</span>}>
                  {getFieldDecorator("appId", { rules: [{ required: true, message: "请输入appId" }] })(
                    <Input placeholder={"请输入appId"} style={{ width: "94%" }} disabled />
                  )}
                </Form.Item>
                <Form.Item label={<span>AppSecret</span>}>
                  {getFieldDecorator("appSecret", { rules: [{ required: true, message: "请输入appSecret" }] })(
                    <Input placeholder={"请输入appSecret"} style={{ width: "94%" }} />
                  )}
                </Form.Item>
                {
                  channel == 'FS_NATIVE' ? (
                    <div>
                      <Form.Item label={<span>EncryptKey</span>}>
                        {getFieldDecorator("encryptKey")(<Input placeholder={"请输入encryptKey"} style={{ width: "94%" }} />)}
                      </Form.Item>
                      <Form.Item label={<span>VerificationToken</span>}>
                        {getFieldDecorator("verificationToken", { rules: [{ required: true, message: "请输入verificationToken" }] })(
                          <Input placeholder={"请输入verificationToken"} style={{ width: "94%" }} />
                        )}
                      </Form.Item>
                    </div>
                  ) : ''
                }
              </div>
            ) : null
          }
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(ChannelInfoEdit)